<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/18 0018
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>客户列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<table id="customerTable" lay-filter="customerTable"></table>
<%--头部操作框--%>
<script type="text/html" id="customerToolbar">
     <div class="layui-btn-container">
         <div class="layui-inline">
             <button class="layui-btn layui-btn-sm" lay-event="search" style="width: 80px; height: 35px;font-size: 15px">
                 <i class="layui-icon layui-icon-search"></i>
                 搜索</button>
         </div>
         <div class="layui-inline">
             <div class="layui-inline">
                 <button class="layui-btn layui-btn-sm" lay-event="customer_add" style="width: 80px; height: 35px;font-size: 15px">
                     <i class="layui-icon layui-icon-add-1"></i>
                     新建</button>
             </div>
<%--             <ul>--%>
<%--                 <li id="add-btn">--%>
<%--                     <button class="layui-btn layui-btn-sm" lay-event="add" style="width: 80px; height: 35px;font-size: 15px">--%>
<%--                         <i class="layui-icon layui-icon-add-1"></i>--%>
<%--                         新建--%>
<%--                     </button>--%>
<%--                 </li>--%>
<%--             </ul>--%>
<%--             <ul id="add-btn-more" style="z-index: 999;position: fixed;display: none;" class="layui-bg-green">--%>
<%--                 <li>--%>
<%--                     <button class="layui-btn layui-btn-sm" lay-event="customer_add">--%>
<%--                         <i class="layui-icon layui-icon-add-1"></i>--%>
<%--                             新建客户</button>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <button class="layui-btn layui-btn-sm" lay-event="follow_up_add">--%>
<%--                         <i class="layui-icon layui-icon-add-1"></i>--%>
<%--                             新建跟踪记录</button>--%>
<%--                 </li>--%>
<%--             </ul>--%>
         </div>
         <div class="layui-inline">
             <button class="layui-btn layui-btn-sm" lay-event="update" style="width: 80px; height: 35px;font-size: 15px">
                 <i class="layui-icon layui-icon-edit"></i>
                 修改</button>
         </div>
         <div class="layui-inline">
             <button class="layui-btn layui-btn-sm" lay-event="transfer" style="background: orange; width: 80px; height: 35px;font-size: 15px">
             <i class="layui-icon layui-icon-senior"></i>
                 转移</button>
         </div>
         <div class="layui-inline">
             <button class="layui-btn layui-btn-sm" lay-event="batchDelete" style="width: 80px; height: 35px; background: orangered;font-size: 15px">
                 <i class="layui-icon layui-icon-delete"></i>
                 删除</button>
         </div>
         <div class="layui-inline">
             <button class="layui-btn layui-btn-sm" lay-event="export" style="width: 80px; height: 35px; background: orangered; font-size: 15px">
                 <i class="layui-icon layui-icon-delete"></i>
                 导出</button>
         </div>
     </div>
</script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    layui.use(['layer','form','table','jquery'],function () {
        var layer=layui.layer,
            form=layui.form;
        var table=layui.table;
        var $=layui.$;
        table.render({
            elem:"#customerTable",
            url:"${pageContext.request.contextPath}/customer/list",
            toolbar:'#customerToolbar',//开启头部工具栏
            defaultToolbar:['filter','print','exports'],//右侧工具栏
            cols:[[//定义列信息
                {type:'checkbox',fixed:'left'},//最左侧复选框
                {field:"name",title:"客户名称",width:220},//一列数据项
                {field:"status",title:"客户状态",width:220,
                    templet:function (res) {//取对象属性中的属性
                        if(res.status==0){
                            return "成交客户";
                        }else if (res.status==1){
                            return "潜在客户"
                        }else if (res.status==2){
                            return "意向客户"
                        }else if (res.status==3){
                            return "失败客户"
                        }else if (res.status==''){
                            return "请选择"
                        }
                        return "已流失客户";
                    }
                },
                {field:"type",title:"客户类别",width:220,
                    templet:function (res) {//取对象属性中的属性
                        if(res.status==1){
                            return "普通客户";
                        }else if (res.status==2){
                            return "VIP客户"
                        }else if (res.status==3){
                            return "老客户"
                        }else if (res.status==4){
                            return "代理商"
                        }else if (res.status==5){
                            return "供应商"
                        }else if (res.status==6){
                            return "合作伙伴"
                        }else if (res.status==7){
                            return "其他"
                        }
                        return "请选择";
                    }
                },
                {field:"maturity",title:"客户成熟度",width:220,
                    templet:function (res) {//取对象属性中的属性
                        if(res.status==1){
                            return "A+：明确成交意向";
                        }else if (res.status==2){
                            return "A-：有初步成交意向"
                        }else if (res.status==3){
                            return "B+：关键人有成交意向"
                        }else if (res.status==4){
                            return "B-：关键人成交意向不确定"
                        }else if (res.status==5){
                            return "C+：初步联系，有意向"
                        }else if (res.status==6){
                            return "C-：初步联系，意向不确定"
                        }else if (res.status==7){
                            return "D：新建客户"
                        }else if (res.status==8){
                            return "E：明显拒绝"
                        }else if (res.status==9){
                            return "F：无效客户"
                        }
                        return "请选择";
                    }
                },
                {field:"level",title:"客户等级",width:220,
                    templet:function (res) {//取对象属性中的属性
                        if(res.status==1){
                            return "☆";
                        }else if (res.status==2){
                            return "☆☆"
                        }else if (res.status==3){
                            return "☆☆☆"
                        }else if (res.status==4){
                            return "☆☆☆☆"
                        }else if (res.status==5){
                            return "☆☆☆☆☆"
                        }
                        return "请选择";
                    }
                },
                {field:"description",title:"客户描述",width:220},
            ]],
            page:true
        })
        layer.msg('Hello World');

        //监听头部工具栏事件
        // toolbar(table的lay-filter)
        table.on('toolbar(customerTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);//获取到选中的内容
            console.log(obj)
            console.log(checkStatus.data)
            switch(obj.event){// 工具栏中按钮的 lay-event属性的值
                case 'search':
                    layer.open({
                        title:"客户搜索",
                        type:2,
                        content: "${pageContext.request.contextPath}/customer/toSearch",
                        area: ['700px','400px'],
                        maxmin: true
                    })
                    break;
                case 'customer_add':
                    //弹出层
                    layer.open({
                        title:"新增客户",//标题
                        type:2,// 2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/customer/toAdd",
                        area: ['800px', '700px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'update':
                    if(checkStatus.data.length<1){
                        layer.alert("请至少勾选一个")
                        return;
                    }else if(checkStatus.data.length>1){
                        layer.alert("最多勾选一个")
                        return;
                    }
                    //弹出层
                    layer.open({
                        title:"客户修改",//标题
                        type:2,// 2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/customer/toUpdate?id="+checkStatus.data[0].id,
                        area: ['800px', '700px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'transfer':
                    //弹出层
                    layer.open({
                        title:"客户转移",//标题
                        type:2,// 2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/customer/toTransfer",
                        area: ['700px', '400px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'batchDelete':
                    layer.msg('删除');
                    console.log(checkStatus)
                    console.log(checkStatus.data)//选中的数据
                    if(checkStatus.data.length==0){
                        layer.alert("请至少选择一项删除！");
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值,并放入数组
                    for(var i=0;i<data.length;i++){
                        idArray.push(data[i].id);
                    }
                    console.log(idArray);
                    //执行批量删除
                    $.post("${pageContext.request.contextPath}/customer/batchDelete",
                        {ids:idArray.join(",")},function (result) {
                            if(result.code==0){
                                layer.msg("删除成功");
                                //重写加载表格
                                table.reload("customerTable",{
                                    page:{
                                        curr:1
                                    }
                                })
                                return
                            }
                            layer.msg("删除失败");
                        },"json")
                    break;
                case 'export':
                    layer.msg('导出客户信息');
                    console.log(checkStatus)
                    console.log(checkStatus.data)//选中的数据
                    if(checkStatus.data.length==0){
                        layer.alert("请至少选择一项导出！");
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值,并放入数组
                    for(var i=0;i<data.length;i++){
                        idArray.push(data[i].id);
                    }
                    console.log(idArray);
                    //执行批量删除
                    $.post("${pageContext.request.contextPath}/customer/export",
                        {ids:idArray.join(",")},function (result) {
                            if(result.code==0){
                                layer.msg("导出成功");
                                //重写加载表格
                                table.reload("customerTable",{
                                    page:{
                                        curr:1
                                    }
                                })
                                return
                            }
                            layer.msg("导出失败");
                        },"json")
                    break;
            };
        });
    })
</script>

</body>
</html>
